<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="">请数据
            <div id="data">...</div>
            <input type="button" id="btnSend" value="提交">
        </label>  
    </form>
    <script>
        document.getElementById('btnSend').onclick=function(){
            console.log('点击了')
            document.getElementById('data').innerText='正在请求中'
            // 1.创建Ajax对象
            var xhr=new XMLHttpRequest()
            // 2.打开对象的请求链接
            xhr.open('GET','http://www.rttop.cn/api/?day=1-1',true)
            // 3.发送请求
            xhr.send()
            // 4.获取数据
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){ //发送成功
                    if(xhr.status==200){ //接收成功
                        // 输出返回的数据
                        console.log(xhr.responseText)
                        document.getElementById('data').innerText=xhr.responseText
                    }
                }
            }
        }
    </script>
</body>
</html>